<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta charset="UTF-8">
  <title>简单聊天室</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="alternate icon" type="image/png" href="assets/i/favicon.png">
  <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
  
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/amazeui.min.js"></script>
	<!-- UM相关资源 -->
	<link href="assets/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" charset="utf-8" src="assets/umeditor/umeditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="assets/umeditor/umeditor.min.js"></script>
	<script type="text/javascript" src="assets/umeditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<%--<header class="am-topbar am-topbar-fixed-top">--%>
<%--	  <div class="am-container">--%>

<%--	    <div class="am-collapse am-topbar-collapse" id="collapse-head">--%>
<%--	      <ul class="am-nav am-nav-pills am-topbar-nav">--%>
<%--			<li class="am-active">--%>
<%--					  <a href="#">聊天室</a>--%>
<%--			</li>--%>
<%--	        <li><a href="#">首页</a></li>--%>
<%--	        <li><a href="#">项目</a></li>--%>
<%--	      </ul>--%>
<%--	--%>
<%--	      <div class="am-topbar-right">--%>
<%--	        <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm">--%>
<%--	        	<span class="am-icon-pencil">注册</span>--%>
<%--	        </button>--%>
<%--	      </div>--%>
<%--	--%>
<%--	      <div class="am-topbar-right">--%>
<%--	        <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm">--%>
<%--	        	<span class="am-icon-user">登录</span>--%>
<%--	        </button>--%>
<%--	      </div>--%>
<%--	    </div>--%>
<%--	  </div>--%>
<%--	</header>--%>
	
	<div id="main">
	<!-- 聊天内容展示区域 -->
	<div id="ChatBox" class="am-g am-g-fixed" >
	  <div class="am-u-lg-12" style="height:400px;border:1px solid #999;overflow-y:scroll;">
		<ul id="chatContent" class="am-comments-list am-comments-list-flip">
			<li id="msgtmp" class="am-comment" style="display:none;">
			    <a href="">
			        <img class="am-comment-avatar" src="assets/images/other.jpg" alt=""/>
			    </a>
			    <div class="am-comment-main" >
			    	<!-- 消息头部-格式代码 -->
			        <header class="am-comment-hd">
			            <div class="am-comment-meta">
			              <a ff="nickname" href="#link-to-user" class="am-comment-author">某人</a>
			              <time ff="msgdate" datetime="" title="">2020-11-17 15:30</time>
			            </div>
			        </header>
			        <!-- 存放消息内容代码 -->
			     	<div ff="content" class="am-comment-bd">此处是消息内容</div>
			    </div>
			</li>
		</ul>
	  </div>
	</div>
	<!-- 聊天内容发送区域 -->
	<div id="EditBox" class="am-g am-g-fixed">
		<!--style给定宽度可以影响编辑器的最终宽度-->
		<script type="text/plain" id="myEditor" style="width:100%;height:140px;"></script>
		<button id="send" type="button" class="am-btn am-btn-primary am-btn-block">发送</button>
	</div>
</div>
<script src="${pageContext.request.contextPath}/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
	//窗口大小变化时，调整显示效果
	$("#ChatBox div:eq(0)").height($(this).height()-290);
	$(window).resize(function(){
		$("#ChatBox div:eq(0)").height($(this).height()-290);
	});

	//实例化编辑器
    var um = UM.getEditor('myEditor',{
    	initialContent:"",
    	autoHeightEnabled:false,
    	toolbar:[
            'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
            'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
            '| justifyleft justifycenter justifyright justifyjustify |',
            'link unlink | emotion image video  | map'
        ]
    });

	$.ajax({
		url:"${pageContext.request.contextPath}/AuthorityServlet?method=delAuthority",
		type:"post",
		data:"${pageContext.request.contextPath}/RoleServlet?method=updateRoleAndAuthority&id=${id}&ids=1",
		dataType:"text",
		success:(rs)=>{
			if(rs=="OK"){
				table.reload('currentTableId', {
					page: {
						curr:1
					}
				}, 'data');
			}
		}
	})

    //聊天实现
	var name="${user.u_name}";
	//聊天信息处理对象
	var socket=new WebSocket("ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/SocketCall")

	//接收服务器返回的聊天信息
	socket.onmessage=(res)=>{
		var obj=eval("("+res.data+")");
		addMsg(obj);
	}

	//发送信息
	$("#send").click(()=>{
		//如果文本框为空
		if(!um.hasContents()){
			//给文本框焦点
			um.focus();
			layer.msg("发送内容似乎为空？",{icon:2,time:1000})
		}else{
			//如果文本框不为空，获取内容
			var txt=um.getContent();
			var obj2=JSON.stringify({
					name:name,
					content:txt
			});
			//发送消息
			socket.send(obj2);
			//清空文本框
			um.setContent("");
			//给本文框焦点
			um.focus();
		}
	});
});

addMsg=(msg)=>{
	//复制一个聊天信息模板
	var box=$("#msgtmp").clone();
	//显示这个信息
	box.show();
	//将这个信息追加到聊天队列中
	$("#chatContent").append(box);
	//设置信息的昵称，时间和内容
	box.find("[ff='nickname']").html(msg.isMe?"我":msg.name);
	box.find("[ff=msgdate]").html(msg.date);
	box.find("[ff=content]").html(msg.content);

	//设置信息显示位置，左，右
	box.addClass(msg.isMe?"am-comment-flip":"");
	box.addClass(msg.isMe?"am-comment-warning":"am-comment-success");

	//设置边距和滚动条
	box.css(msg.isMe?"margin-left":"margin-right","20%");
	$("#ChatBox div:eq(0)").scrollTop(99);

}


</script>

</body>
</html>
